<template>
    <div class="container">
        <div class="handle-box">
            <span style="padding: 8px">姓名</span>
            <el-input v-model="query.name" placeholder="姓名" class="handle-input mr10"></el-input>
            <span style="padding: 8px"></span>
            <span style="padding: 8px">手机</span>
            <el-input v-model="query.mobile" placeholder="手机" class="handle-input mr10"></el-input>
            <span style="padding: 8px">身份证</span>
            <el-input v-model="query.idcard" placeholder="身份证" class="handle-input mr10"></el-input>
            <span style="padding: 8px"></span>
            <el-button type="success" icon="el-icon-search" size="medium" @click="handleSearch">搜索</el-button>
            <!-- <el-button type="warning" size="medium" icon="el-icon-refresh-left" @click="resultClick()">重置</el-button> -->
        </div>
        <div style="padding: 10px">
            <!-- <el-button type="primary" icon="el-icon-document-add" size="medium" @click="createMethod">新建</el-button> -->
            <!-- <span style="padding: 8px"></span>-->
            <el-button type="danger" icon="el-icon-delete" size="medium" @click="delAllSelection">批量删除</el-button> 
        </div>
        <el-table
            :data="tableData"
            border
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="序号" align="center" width="100" fixed>
                <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <el-table-column label="股票名称" align="center">
                <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
           <!-- <el-table-column label="案号" align="center">
                <template slot-scope="scope">{{ scope.row.caseno }}</template>
            </el-table-column> -->
            
            <el-table-column label="用户" align="center">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="身份证" align="center">
                <template slot-scope="scope">{{ scope.row.idcard }}</template>
            </el-table-column>

            <el-table-column label="手机" align="center">
                <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>

             <el-table-column label="备注" align="center">
                <template slot-scope="scope">{{ scope.row.mark }}</template>
            </el-table-column>
              <el-table-column label="是否转化" align="center">
                <template slot-scope="scope">{{ scope.row.statuskhtext }}</template>
            </el-table-column>
            <!-- <el-table-column label="图片" align="center">
                <template slot-scope="scope">
                    <img :src="docLoadPath+scope.row.url" style="width:60px;height:60px;" alt="" v-if="scope.row.url">
                </template>
            </el-table-column> -->
            <!-- <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">启用</span>
                    <span v-if="scope.row.status == 1">禁用</span>
                </template>
            </el-table-column> -->
            <el-table-column label="创建时间" align="center">
                <template slot-scope="scope">{{ scope.row.create_time}}</template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button @click="createBus(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>

                    <el-button @click="backTomycustomer(scope.row)" type="text" size="small" v-if="scope.row.statuskh !='1' ">转为客户</el-button>
                    <el-button @click="handleDelete(scope.row)" type="text" size="small" icon="el-icon-delete" class="red">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                :current-page="query.pageIndex"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
        <!-- 添加修改教练弹框 -->
        <el-dialog
            :title="ruleForm.id ? '编辑' : '新增'"
            :visible.sync="dialogVisible"
            width="50%"
            :close-on-click-modal="false"
            top="2%"
            :before-close="(e) => handleClose(e, 'ruleForm')"
        >
            <el-form :model="ruleForm" ref="ruleForm" :rules="ruleForms" v-loading="loading" status-icon label-width="80px">
                <el-form-item label="股票名称" prop="title">
                    <el-input v-model.trim="ruleForm.title" placeholder="请输入内容" style="width: 50%" disabled></el-input>
                </el-form-item>
                <!-- <el-form-item label="图片" prop="url">
                    <el-input v-model="ruleForm.url" placeholder="请输入url"></el-input>
                    <img-upload :img-url.sync="ruleForm.url"></img-upload>
                    <p style="padding: 6px; font-size: 12px; color: red">(图片高宽比16:9,格式为png透明图)</p>
                </el-form-item> -->
                <!-- <el-form-item label="状态">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="0">启用</el-radio>
                        <el-radio :label="1">禁用</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                 <!-- <el-form-item label="案号" prop="caseno">
                    <el-input v-model.trim="ruleForm.caseno" placeholder="请输入内容" style="width: 80%"></el-input>
                </el-form-item> -->
                <el-form-item label="案号" prop="caseno">
                  <el-input v-model.trim="ruleForm.caseno" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
                <el-form-item label="用户" prop="name">
                    <el-input v-model.trim="ruleForm.name" placeholder="请输入内容" style="width: 80%"></el-input>
                </el-form-item>
                   <el-form-item label="手机" prop="mobile">
                    <el-input v-model.trim="ruleForm.mobile" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>

                   <el-form-item label="身份证" prop="idcard">
                    <el-input v-model.trim="ruleForm.idcard" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
            
                <el-form-item label="备注" prop="mark">
                    <el-input v-model.trim="ruleForm.mark" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>

                 <!-- <el-form-item label="描述" prop="content">
                   <el-input v-model="ruleForm.content" :rows="6" type="textarea" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model.trim="ruleForm.sort" placeholder="请输入排序号" style="width: 80%"></el-input>
                    <p style="padding: 6px; font-size: 12px; color: red">(数字越大越靠前)</p>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit()">确 定</el-button>
            </span>
        </el-dialog>
    
       <!-- 转化客户 -->
        <el-dialog
            :title="ruleFormzhcustomer.id ? '转化客户' : '新增'"
            :visible.sync="dialogVisiblezhCustom"
            width="50%"
            :close-on-click-modal="false"
            top="2%"
            :before-close="(e) => handleClose(e, 'ruleFormzhcustomer')"
        >
            <el-form :model="ruleFormzhcustomer" ref="ruleFormzhcustomer" :rules="ruleForms" v-loading="loading" status-icon label-width="130px">
                <!-- <el-form-item label="股票名称" prop="title">
                    <el-input v-model.trim="ruleFormzhcustomer.title" placeholder="请输入装饰件名称" style="width: 80%"></el-input>
                </el-form-item> -->
                <el-form-item label="材料1" prop="fileurl">
                    <el-input v-model="ruleFormzhcustomer.fileurl" placeholder="请输入"></el-input>
                    <img-upload :img-url.sync="ruleFormzhcustomer.fileurl"></img-upload>
                    <p style="padding: 6px; font-size: 12px; color: red">(图片高宽比16:9,格式为png透明图)</p>
                </el-form-item>
                <!-- <el-form-item label="状态">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="0">启用</el-radio>
                        <el-radio :label="1">禁用</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                 <el-form-item label="案号" prop="caseno">
                    <el-input v-model.trim="ruleFormzhcustomer.caseno" placeholder="请输入内容" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="用户" prop="name">
                    <el-input v-model.trim="ruleFormzhcustomer.name" placeholder="请输入内容" style="width: 80%" disabled></el-input>
                </el-form-item>
                   <el-form-item label="手机" prop="mobile">
                    <el-input v-model.trim="ruleFormzhcustomer.mobile" placeholder="请输入内容" style="width: 80%" disabled  ></el-input>
                </el-form-item>
                 <el-form-item label="身份证" prop="idcard">
                    <el-input v-model.trim="ruleFormzhcustomer.idcard" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="mark">
                    <el-input v-model.trim="ruleFormzhcustomer.mark" placeholder="请输入内容" style="width: 80%"  ></el-input>
                </el-form-item>
                 <!-- <el-form-item label="描述" prop="content">
                   <el-input v-model="ruleForm.content" :rows="6" type="textarea" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model.trim="ruleForm.sort" placeholder="请输入排序号" style="width: 80%"></el-input>
                    <p style="padding: 6px; font-size: 12px; color: red">(数字越大越靠前)</p>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisiblezhCustom = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitbackTomycustomer()">确 定</el-button>
            </span>
        </el-dialog>
    
    </div>
</template>

<script>
// 诉讼管理
import api from '@/api/index';
import { getdate } from '@/utils/utils';
import imgUpload from '@/components/views/commons/ImgUpload';
export default {
    name: 'financeList',
    components:{imgUpload},
    data() {
        return {
            docLoadPath: api.IMG_PATH,
            exhibition_id: '',
            serverid: '',
            query: {
                pageIndex: 1,
                pageSize: 10,
                name: '',
                mobile: '',
                idcard: '',
            },
            zzTypeist: [],
            pageTotal: 0,
            tableData: [],
            fId: '',
            f_text: '',
            loading: false,
            fTextModel: false,
            dialogVisible: false,
            dialogVisiblezhCustom: false,
            ruleForm: {
                title: '',
                caseno: '',
                status:0,
                name: '',
                mobile: '',
                idcard: '',
                mark: '',
                sort:0
            },
            ruleFormzhcustomer: {
                title: '',
                caseno: '',
                status:0,
                name: '',
                mobile: '',
                idcard: '',
                mark: '',
                sort:0,
                fileurl:'',
            },
            ruleForms: {
                // title: [{ required: true, message: '请填写公告名称', trigger: 'blur' }],
                // url: [{ required: true, message: '图片地址', trigger: 'blur' }],
                // content: [{ required: false, message: '请填写内容', trigger: 'blur' }]
            }
        };
    },
    filters: {
        toFixedFile: function (val) {
            if (!val) return '0.00';
            return Number(val).toFixed(2);
        },
        formDate: (val) => {
            if (!val) return '';
            return getdate(val);
        }
    },
    mounted() {

       this.serverid = this.$route.query.serverid;
        

        this.initAjaxMethod();
    },

    methods: {
        //打回
        refuseMethod(data) {
            this.f_text = '';
            this.fTextModel = true;
            this.fId = data.id;
        },
        //删除
        handleDelete(data) {
            this.delAjaxMethod(data.id);
        },
        //编辑
        createBus(row) {
            const ruleForm = {
                title: row.title,
                caseno: row.caseno,
                name: row.name,
                status: row.status || 0,
                mobile: row.mobile, 
                 idcard: row.idcard,    
                mark: row.mark,               
                id:row.id
            };
            this.ruleForm = ruleForm;
            this.dialogVisible = true;
        },
        resultClick() {
            this.query.name = '';
            this.query.pageIndex = 1;
            this.initAjaxMethod();
        },
        createMethod() {
            const ruleForm = {
                title: '',
                caseno: '',
                name: '',
                mobile:'',
                   idcard:'',   
                status:0
            };
            this.ruleForm = ruleForm;
            this.dialogVisible = true;
        },
        // 转化客户
        backTomycustomer(row) {
            const ruleFormzhcustomer = {
                title: row.title,
                caseno: row.caseno,
                name: row.name,
                status: row.status || 0,
                mobile: row.mobile,    
                idcard : row.idcard,            
                id:row.id
            };
            this.ruleFormzhcustomer = ruleFormzhcustomer;
            this.dialogVisiblezhCustom = true;
        },


        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            let arr = [];
            if (this.multipleSelection.length <= 0) {
                this.$message({
                    type: 'error',
                    message: '请选择一个'
                });
                return false;
            } else {
                this.multipleSelection.forEach((item) => {
                    arr.push(item.id);
                });
                this.delAjaxMethod(arr.join(','));
            }
        },
        delAjaxMethod(ids) {
            this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({ text: '加载中...' });
                this.$http
                    .post(api.DECORATION_DEL, { ids: ids })
                    .then((res) => {
                        loading.close();
                        console.log('项目列表', res);
                        if (res.code == 1) {
                            this.$message.success('删除成功');
                            this.query.pageIndex = 1;
                            this.initAjaxMethod();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    });
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.initAjaxMethod();
        },
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.initAjaxMethod();
        },
        initAjaxMethod() {
            let data = {
                pageIndex: this.query.pageIndex, //[string]	是	当前页
                pageSize: this.query.pageSize, //[string]	是	每页条数
                name: this.query.name,
                mobile: this.query.mobile,
                idcard: this.query.idcard,
                serverid: this.serverid
            };
            this.$http
                .post(api.DECORATION_INDEX, data)
                .then((res) => {
                    console.log('财务', res);
                    if (res.code == 1) {
                        this.tableData = Array.isArray(res.data.list) ? res.data.list : [];
                        this.pageTotal = res.data.total;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //弹框关闭按钮
        handleClose(done, name) {
            if (this.$refs['name']) {
                this.$refs['name'].resetFields();
            }
            done();
        },
        onSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    const url = this.ruleForm.id ? api.DECORATION_EDIT : api.DECORATION_ADD;
                    this.$http.post(url, this.ruleForm)
                        .then((res) => {
                            if (res.code == 1) {
                                this.$message.success('操作成功');
                                this.initAjaxMethod();
                                this.dialogVisible = false;
                            } else {
                                this.$message.error(res.msg);
                            }
                            this.loading = false;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return this.$message.error('有必填项目未填写');
                }
            });
        },

       //转化 
        onSubmitbackTomycustomer() {
            this.$refs.ruleFormzhcustomer.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    //const url = this.ruleFormzhcustomer.id ? api.DECORATIONcustom_EDIT : api.DECORATIONcustom_ADD;
                    const url =api.DECORATIONcustom_ADD;
                    this.ruleFormzhcustomer.claid=this.ruleFormzhcustomer.id;
                    this.$http.post(url, this.ruleFormzhcustomer)
                        .then((res) => {
                            if (res.code == 1) {
                                this.$message.success('操作成功');
                                this.initAjaxMethod();
                                this.dialogVisiblezhCustom = false;
                            } else {
                                this.$message.error(res.msg);
                            }
                            this.loading = false;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return this.$message.error('有必填项目未填写');
                }
            });
        },

        
        backTomycustomer44(data1){
            let isCheckName=window.sessionStorage.getItem('userName');
            if(isCheckName){
                this.$router.push({path:'/news',query:{zid:this.zid,checkno:this.checkno,hoscode:this.hoscode,checkdate:this.checkdate}});
            }
     
        }
    }
};
</script>

<style scoped>
.handle-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.el-input--small {
    display: initial;
}
.handle-input {
    width: auto;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.red {
    color: #f56c6c;
}
.green {
    color: #67c23a;
}
</style>